<template>
  <div>
    <!-- 上层:黑色部分 -->
    <div class="top_black">
      <!-- 标题层级 -->
      <div>
        <p class="beijing">北京</p>
        <h1>水疗中心</h1>
        <ul class="title">
          <li><a href="">营业时间</a></li>
          <li><a href="">水疗服务</a></li>
          <li><a href="">康养服务</a></li>
          <li><a href="">放松体验</a></li>
        </ul>
      </div>
      <!-- 图片 -->
      <div class="pic">
        <img src="/img/spa/spa.jpg" alt="" />
        <a href="/photos-and-videos">查看更多照片</a>
      </div>
      <!-- 联系我们 -->
      <div class="connection">
        <div class="white">
          <span> 让我们为您安排个性化的水疗体验。 </span>
          <span>+8615200057013</span>
          <a class="explore" href="">联系我们</a>
        </div>
      </div>
      <!-- 营业时间 -->
      <div class="time">
        <p class="p1">营业时间</p>
        <div class="time_2">
          <span>每日</span>
          <span>上午10:00~晚上11:00</span>
        </div>
        <p>
          *如欲在晚上 9:00 过后进行护理，请提前预约。预约确定需视供求情况而定。
        </p>
      </div>
    </div>
    <!-- 下层:白色部分 -->
    <div class="white">
      <p>水疗服务</p>
      <div>
        <div class="row1">
          <div class="d1">
            <span>特色水疗护理</span>
            <p>
              享受这些修复身心的护理，深度体验历久传承的中国传统理疗方法和美容技法。
            </p>
          </div>
          <div class="d1">
            <span>奢华泡浴</span>
            <p>从我们专为您准备的香薰沐浴体验中挑选心仪的一项。</p>
          </div>
          <div class="d1">
            <span>身体按摩</span>
            <p>多种疗愈按摩可帮助您舒解放松，重焕活力。</p>
          </div>
        </div>
        <div class="row1">
          <div class="d1">
            <span>魔力之夜——双人护理</span>
            <p>浪漫奢宠的水疗体验</p>
          </div>
          <div class="d1">
            <span>男士水疗</span>
            <p>专为男性人士设计的护理体验。</p>
          </div>
          <div class="d1">
            <span>儿童水疗</span>
            <p>以专属护理疗程共享亲子水疗乐趣。</p>
          </div>
        </div>
      </div>
      <!-- 更多联系我们 -->
      <div class="connection">
        <div class="white2">
          <span>我们可为您妥帖安排一切。</span>
          <span>+8615200057013</span>
          <a class="explore" href="">探索</a>
        </div>
      </div>
    </div>

    <!-- 下层:黑色部分 -->
    <div class="bottom_black">
      <div class="pic">
        <img src="/img/spa/spa_02.jpg" alt="" />
      </div>
      <p class="title">放松体验</p>
      <!-- 下方详情 -->
      <div class="big">
        <div class="top">
          <img src="/img/spa/spa_03.jpg" alt="" />
        </div>
        <div class="bottom">
          <p>午夜浪漫魔力</p>
          <p>
            丝绸长袍、烛光茶道、玫瑰花瓣、舒缓按摩、醉人香槟，没有什么比独享整座水疗中心更浪漫的体验了，您可奢享一整晚的全然放松与舒适惬意。
          </p>
        </div>
      </div>
      <div class="small">
        <div class="left">
          <img src="/img/spa/spa_04.jpg" alt="" />
        </div>
        <div class="right">
          <p>康养日</p>
          <p>
            这是专属于您的呵宠时间，我们可随时为您提供帮助。我们将为您度身定制一段个性化的康养之旅，满足您的健身、营养和精神需求。
          </p>
        </div>
      </div>
      <div class="small_2">
        <div class="left">
          <p>准新人训练营</p>
          <p>
            享受四季康养专家为您量身定制的呵护计划，由内而外焕发风采、焕活精神，为婚礼做好准备。从大喜之日到来前六个月开始，我们将全程悉心陪伴，直至您踏上蜜月之旅。
          </p>
        </div>
        <div class="right">
          <img src="/img/spa/spa_05.jpg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
// 上层: 黑色部分
.top_black {
  background-color: black;
  width: 100%;
  // 层级标题
  .beijing {
    text-align: center;
    color: #fff;
    padding: 30px 10px 0px 10px;
    font-style: italic;
  }
  h1 {
    text-align: center;
    color: #fff;
    padding: 30px 10px 10px 10px;
    font-size: 28px;
  }
  //ul标签
  .title {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 10px;
    font-size: 12px;
    font-weight: bold;

    li {
      float: left;
      padding: 15px 20px;
    }

    a {
      text-decoration: none;
      color: #fff;
    }
  }
  // 背景层
  .pic {
    width: 100%;
    img {
      width: 100%;
      height: 700px;
    }
    a {
      color: #fff;
      display: inline-block;
      padding: 20px 50px 0px 80px;
      text-decoration: underline;
      font-style: italic;
    }
  }

  // 联系我们
  .white {
    margin: auto;
    width: 50%;
    height: 100px;
    background-color: #fff;
    margin-top: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    span:nth-child(1) {
      display: inline-block;
      // background-color: red;
      width: 50%;
      font-size: 18px;
      font-weight: bold;
    }
    span:nth-child(2) {
      display: inline-block;
      // background-color: green;
      width: 20%;
    }
    a {
      display: inline-block;
      width: 20%;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      text-decoration: none;
      text-align: center;
      background-color: black;
    }
    a:hover {
      background-color: #fff;
      color: black !important;
      transition: 0.4s;
      border: 1px solid black;
    }
  }
  // 营业时间
  .time {
    color: #fff;
    margin: auto;
    width: 50%;
    padding-bottom: 40px;
    p {
      &:first-child {
        font-size: 24px;
        text-align: center;
        margin: 60px 0px 40px 0px;
      }
      &:last-child {
        text-align: end;
        font-size: 12px;
      }
    }
    .time_2 {
      display: flex;
      span {
        display: inline-block;
        // display: flex;
        width: 100%;
        padding: 20px 0px;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        justify-content: space-between;
        margin: 20px 0px;
        &:last-child {
          text-align: end;
        }
      }
    }
  }
}
// 下层: 白色部分
.white {
  width: 60%;
  margin: auto;
  p {
    &:first-child {
      display: block;
      margin: 40px;
      font-size: 26px;
      text-align: center;
    }
  }
  div {
    .row1 {
      width: 100%;
      display: flex;
      .d1 {
        justify-content: space-between;
        width: 30%;
        border-top: 1px solid black;
        span {
          display: inline-block;
          font-size: 14px;
          font-weight: bold;
          margin: 15px;
        }
        p {
          display: inline-block;
          font-size: 20px;
          margin: 10px 0px 30px 10px;
        }
      }
    }
  }
  // 联系我们
  .white2 {
    color: white;
    margin: auto;
    width: 85%;
    height: 100px;
    background-color: black;
    margin-top: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 30px;
    span:nth-child(1) {
      display: inline-block;
      // background-color: red;
      margin-left: 20px;
      font-size: 18px;
      font-weight: bold;
    }
    span:nth-child(2) {
      display: inline-block;
      // background-color: green;
      width: 20%;
    }
    a {
      display: inline-block;
      width: 20%;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      font-weight: bold;
      color: black;
      text-decoration: none;
      text-align: center;
      background-color: white;
    }
    a:hover {
      background-color: black;
      color: white !important;
      transition: 0.4s;
      border: 1px solid white;
    }
  }
}
// 下层: 黑色部分
.bottom_black {
  background-color: black;
  //背景图
  .pic {
    width: 100%;
    img {
      width: 100%;
      height: 700px;
    }
  }
  .title {
    font-size: 28px;
    color: #fff;
    display: inline-block;
    text-align: center;
    width: 100%;
    margin-top: 45px;
    margin-bottom: 35px;
  }
  // 下方详情
  .big {
    width: 100%;
    .top {
      widows: 100%;
      img {
        display: block;
        margin: auto;
        padding: 40px 0px 40px 0px;
      }
    }
    .bottom {
      border-left: 3px solid #fff;
      width: 60%;
      margin: auto;
      p {
        padding: 20px;
        color: #fff;
        &:first-child {
          font-size: 14px;
        }
        &:last-child {
          display: inline-block;
          font-size: 20px;
          width: 50%;
        }
      }
    }
  }
  .small {
    margin: auto;
    margin-top: 60px;
    width: 60%;
    display: flex;
    .left {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .right {
      width: 45%;
      justify-content: end;
      p {
        display: inline-block;

        padding: 20px;
        color: #fff;
        &:first-child {
          font-size: 14px;
        }
        &:last-child {
          display: inline-block;
          font-size: 20px;
        }
      }
    }
  }
  .small_2 {
    margin: auto;
    margin-top: 60px;
    width: 60%;
    display: flex;
    .left {
      width: 45%;
      justify-content: end;
      p {
        display: inline-block;

        padding: 20px;
        color: #fff;
        &:first-child {
          font-size: 14px;
        }
        &:last-child {
          display: inline-block;
          font-size: 20px;
        }
      }
    }
    .right {
      width: 100%;
      img {
        width: 100%;
      }
    }
  }
}
</style>
